<template>
	<div class="brand-detail" v-loading="loading">
		<PictureSelectorDialog v-model="dialogVisible" @submit="setLogo" :max-length="1" />
		<el-form ref="ruleFormRef" :model="detailItem" :rules="rules" label-width="120px" class="demo-ruleForm">
			<el-form-item label="品牌名称" prop="name">
				<el-input show-word-limit maxlength="200" v-model="detailItem.name" placeholder="请输入品牌名称" />
			</el-form-item>
			<el-form-item label="品牌LOGO" prop="logo">
				<div class="brand-right">
					<div class="brand-right-img-box" v-if="detailItem.logo !== ``">
						<div class="brand-right-img">
							<el-image style="width: 100%; height: 100%" lazy :src="detailItem.logo" fit="contain"></el-image>
						</div>
						<div class="brand-right-img-p">
							<el-link type="danger" @click="delLogo()">删除</el-link>
						</div>
					</div>
					<div class="brand-right-link">
						<el-link type="primary" @click="showPictureSelectorDialog(true)">添加logo</el-link>
					</div>
				</div>
			</el-form-item>
			<el-form-item label="是否启用">
				<el-switch v-model="detailItem.isEnabled" />
			</el-form-item>
			<el-form-item label="是否显示在页尾">
				<el-switch v-model="detailItem.isShowAtEndOfPage" />
			</el-form-item>
			<el-form-item label="排序">
				<el-input-number v-model="detailItem.sort" :step="1" :min="0" :max="999999" controls-position="right" />
			</el-form-item>
			<el-form-item label="品牌详情">
				<div class="brand-editor" v-loading="loading">
					<Editor v-model="detailItem.brandDescription" />
				</div>
			</el-form-item>
			<!-- <div class="brand-btns">
				<el-button @click="cancel()" :loading="submitLoading">取消</el-button>
				<el-button type="primary" @click="submitForm()" :loading="submitLoading">保存</el-button>
			</div> -->
		</el-form>
	</div>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import Editor from '/@/components/common/editor/Editor.vue';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
import { useBrandApi } from '/@/api/brand';

const { addBrand, editBrand, getBrandDetail } = useBrandApi();

const emit = defineEmits(['update:brandId', 'reloadList', 'closeDetailDialog']);
let loading = ref(false);
let submitLoading = ref(false);
let dialogVisible = ref(false);
let isReady = ref(false);
let detailItem = ref({
	id: '',
	name: '',
	logo: '',
	brandDescription: '<p></p>',
	isEnabled: true, // 是否展示 0->不展示；1->展示
	isShowAtEndOfPage: true,
	sort: 0,
});
let rules = {
	name: [
		{
			required: true,
			message: '请输入品牌名称',
			trigger: 'blur',
		},
	],
	logo: [
		{
			required: true,
			message: '请上传品牌LOGO',
			trigger: 'blur',
		},
	],
};

const props = defineProps({
	brandId: {
		type: Number,
		default: -1,
	},
});
const ruleFormRef = ref(null);

init();

function init() {
	if (props.brandId === 0) {
		return;
	}
	getDetail();
}

async function getDetail() {
	loading.value = true;
	try {
		let params = {
			id: props.brandId,
		};
		let res = await getBrandDetail(params.id);
		if (res.code !== 200) {
			loading.value = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		let tempItem = res.data;
		detailItem.value = {
			id: tempItem.id,
			name: tempItem.name,
			logo: tempItem.logo,
			isEnabled: tempItem.isUse ? true : false, // 是否展示 0->不展示；1->展示
			isShowAtEndOfPage: tempItem.showStatus ? true : false,
			brandDescription: tempItem.brandDescription,
			sort: tempItem.sort,
		};
		loading.value = false;
		isReady.value = true;
	} catch (error) {
		loading.value = false;
		ElMessage({
			type: 'error',
			message: '获取详情失败',
		});
	}
}

function showPictureSelectorDialog(state) {
	dialogVisible.value = state;
}

function delLogo() {
	detailItem.value.logo = '';
}

function setLogo(items) {
	// console.log("777", items)
	if (items.length > 0) {
		let url = items[0].imgUrl;
		detailItem.value.logo = url;
	}
}

function cancel() {
	emit('update:brandId', -1);
}

function submitForm() {
	ruleFormRef.value.validate((valid) => {
		if (valid) {
			// alert('submit!')
			submit();
		} else {
			// console.log("error submit!!")
			return false;
		}
	});
}

async function submit() {
	submitLoading.value = true;
	let params = {};
	let res = null;
	try {
		// 新增
		if (props.brandId === 0) {
			params = {
				name: detailItem.value.name,
				logo: detailItem.value.logo,
				isUse: detailItem.value.isEnabled ? 1 : 0,
				showStatus: detailItem.value.isShowAtEndOfPage ? 1 : 0,
				sort: Number(detailItem.value.sort),
				brandDescription: detailItem.value.brandDescription,
			};
			res = await addBrand(params);
		}
		// 修改
		else {
			params = {
				id: props.brandId,
				name: detailItem.value.name,
				logo: detailItem.value.logo,
				isUse: detailItem.value.isEnabled ? 1 : 0,
				showStatus: detailItem.value.isShowAtEndOfPage ? 1 : 0,
				sort: Number(detailItem.value.sort),
				brandDescription: detailItem.value.brandDescription,
			};
			res = await editBrand(params);
		}

		if (res.code !== 200) {
			submitLoading.value = false;
			// ElMessage({
			// 	type: 'error',
			// 	message: res.msg,
			// });
			return;
		}
		setTimeout(() => {
			submitLoading.value = false;
			ElMessage({
				type: 'success',
				message: '保存成功！',
			});
			emit('reloadList');
			emit('closeDetailDialog');
			cancel();
		}, 500);
	} catch (error) {
		submitLoading.value = false;
		ElMessage({
			type: 'error',
			message: '保存失败',
		});
	}
}
defineExpose({
	submitForm,
	cancel,
});
</script>

<style lang="scss" scoped>
.brand-detail {
	max-width: 800px;
	margin: 0 auto;

	.el-row {
		margin-bottom: 20px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	.brand-left,
	.brand-right {
		font-size: 16px;
	}
	.brand-right {
		display: flex;
		align-items: center;
		.brand-right-img-box {
			text-align: center;
			margin-right: 20px;
			.brand-right-img {
				width: 100px;
				height: 100px;
				background-color: #eeeeee;
			}
			.brand-right-img-p {
				padding-top: 5px;
			}
		}
		.brand-right-link {
		}
	}
	.brand-editor {
		height: 500px;
	}
	.brand-btns {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}
}
</style>
